<template>
  <el-form ref="ruleFormRef" :inline="true" :rules="rules" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="formInline.name" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="formInline.age" placeholder="请输入年龄" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue"
import type { FormInstance, FormRules } from "element-plus"
const props = defineProps(["name","age"])

const formInline = reactive({
  name: props.name || "",
  age: props.age || ""
})

const emit = defineEmits(["close"])
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入名称" }],
  age: [{ required: true, message: "请输入年龄" }]
})
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!")
      const isAdd =true
      emit("close", isAdd, formInline)
    } else {
      console.log("error submit!", fields)
    }
  })
}
</script>
